<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { getPaly, getWeek, getRank, getArtists, getRecommend } from '../api/api'

const container = ref(null)
const dotWrapper = ref(null) 
const cw = ref(1050.56)
const x = ref(0)
const cLeft = ref(0)

const todayHot = ref()
const weekList = ref()
const monthList = ref()
const rankList = ref()
const artistsList = ref()
const recommendList = ref()
const showNav = ref(0)

const onScroll = () => {
    if(container.value){
        x.value = container.value.scrollLeft
        cLeft.value = Math.floor((x.value / cw.value) * 100)
    }
}

const getHotApi = () => {
    let data = async () => {
        let {data} = await getPaly()
        todayHot.value = data
    }
    data()
}

const getWeekApi = () => {
    let data = async () => {
        let {data} = await getWeek(1)
        weekList.value = data
    }
    let data2 = async () => {
        let {data} = await getWeek(2)
        monthList.value = data
    }
    data()
    data2()
}

const getRankApi = async () => {
    let {data} = await getRank()
    rankList.value = data
}

const getArtistsApi = async () => {
    let {data} = await getArtists()
    artistsList.value = data
}

const getRecommendApi = async () => {
    let {data} = await getRecommend()
    recommendList.value = data
}

const toggleNav = (n:number) => {
    showNav.value = n
}

onMounted(() => {
    getHotApi()
    getWeekApi()
    getRankApi()
    getArtistsApi()
    getRecommendApi()
    // 在 options 中将容器元素作为根节点（root）
    window.addEventListener('scroll', onScroll, true)
})

onBeforeUnmount(() => {
    // 停止监听
    window.removeEventListener('scroll', onScroll)
})

</script>

<template>
    <div class="play-top">
        <div class="location-city">
            <img class="location-img" src="../assets/imgs/play/local.png">北京
            <img class="down-img" src="../assets/imgs/play/down.png"></div>
        <div class="search-box" @click="$router.push({name:'playsearch'})">
            <img src="../assets/imgs/play/search.png">
            <div class="search-txt">找明星、演出、场馆</div>
        </div>
    </div>

    <div class="nav-wrapper">
        <div class="play-nav" ref="container">
            <div class="play-nav-item">
                <img src="../assets/imgs/play/01.png">
                <div>演唱会</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/02.png">
                <div>话剧音乐剧</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/03.png">
                <div>脱口秀</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/04.png">
                <div>休闲展览</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/05.png">
                <div>音乐节</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/06.png">
                <div>沉浸剧场</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/07.png">
                <div>亲子艺术</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/08.png">
                <div>音乐会</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/09.png">
                <div>相声</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/10.png">
                <div>舞蹈芭蕾</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/11.png">
                <div>戏曲艺术</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/12.png">
                <div>竞技赛事</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/13.png">
                <div>剧本杀</div>
            </div>
            <div class="play-nav-item">
                <img src="../assets/imgs/play/14.png">
                <div>其他</div>
            </div>
        </div>
    </div>

    <div class="dot-wrapper" ref="dotWrapper">
        <div class="dot" :style="`left: ${cLeft}% ;`"></div>
    </div>

    <div class="title-list">
        <img src="../assets/imgs/play/today.png">
        <div class="more">更多 &gt;</div>
    </div>

    <div class="today-hot-wrapper">
        <div class="today-hot-list">
            <div class="today-hot-item" v-for="t in todayHot" @click="$router.push({name:'playDetail',params: {pid: t.performanceId}})">
                <div class="item-img">
                    <img :src="t.posterUrl">
                    <div class="lable">{{ t.cornerDisplayName }}</div>
                    <div class="score" v-show="t.score != '0.0'">{{ t.score }} <span>分</span></div>
                </div>
                <a :class="[t.discountTag ? 'item-tag-have':'item-tag']">{{ t.discountTag?"套票"+t.discountTag:"火热抢购中" }}</a>
                <div class="item-con">{{ t.name }}</div>
            </div>
        </div>
    </div>

    <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item>
            <img src="../assets/imgs/play/banner1.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img src="../assets/imgs/play/banner2.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img src="../assets/imgs/play/banner3.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
            <img src="../assets/imgs/play/banner4.jpg" alt="">
        </van-swipe-item>
    </van-swipe>

    <div class="title-list">
        <div class="title-nav">
            <div :class="{active: showNav === 0}" @click="toggleNav(0)">七日精选</div>
            <div :class="{active: showNav === 1}" @click="toggleNav(1)">月度看点</div>
        </div>
        <div class="more">日历 &gt;</div>
    </div>

    <div class="today-hot-wrapper" v-show="showNav === 0">
        <div class="today-hot-list">
            <div class="today-hot-item" v-for="w in weekList" @click="$router.push({name:'playDetail',params: {pid: w.performanceId}})">
                <div class="item-img">
                    <img :src="w.posterUrl">
                    <div class="lable">{{ w.cornerDisplayName }}</div>
                    <div class="score" v-show="w.score != '0.0'">{{ w.score }} <span>分</span></div>
                </div>
                
                <div class="item-con m-2">{{ w.name }}</div>
                <div class="price"><i>￥</i>{{ w.minTicketOrSellPrice }}<span>起</span> </div>
            </div>
        </div>
    </div>

    <div class="today-hot-wrapper" v-show="showNav === 1">
        <div class="today-hot-list">
            <div class="today-hot-item" v-for="m in monthList">
                <div class="item-img">
                    <img :src="m.posterUrl">
                    <div class="lable">{{ m.cornerDisplayName }}</div>
                    <div class="score" v-show="m.score != '0.0'">{{ m.score }} <span>分</span></div>
                </div>
                
                <div class="item-con m-2">{{ m.name }}</div>
                <div class="price"><i>￥</i>{{ m.minTicketOrSellPrice }}<span>起</span> </div>
            </div>
        </div>
    </div>

    <div class="play-rank">
        <div class="rank-title">
            <div class="big-title">精选榜单</div>
            <div class="more">更多榜单 &gt;</div>
        </div>

        <div class="rank-wrapper">
            <div class="rank-list">
                <div class="rank-item" v-for="r in rankList">
                    <div class="rank-item-title">
                        <div class="title">{{ r.title }}</div>
                        <a class="more">详情 &gt;</a>
                    </div>

                    <div class="con-item" v-for="(p,i) in r.performances" :key="i" @click="$router.push({name:'playDetail',params: {pid: p.performanceId}})">
                        <div class="rank-num">NO.{{ i+1 }}</div>
                        <div class="rank-con">
                            <img :class="{active: i === 0 }" :src="p.posterUrl">
                            <div class="play-details">
                                <div class="play-name">{{ p.name }}</div>
                                <div class="play-desc" v-show="p.brightPointList">{{ p.brightPointList?p.brightPointList[0].title:"" }}</div>
                                <div class="play-price">￥ {{ p.priceRange.split("-")[0] }} <span>起</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>

    <div class="other-title">大咖新动态</div>
    <div class="artists-wrapper">
        <div class="artists-list">
            <div class="artists-item" v-for="a in artistsList">
                <div class="artists-img"><img :src="a.headUrl"></div>
                <div class="artists-name">{{ a.celebrityName }}</div>
                <div class="artists-span">{{ a.recommendTag }} <span class="red-tip" v-show="a.updateType != 0"></span> </div>
            </div>
        </div>
    </div>
    
    <div class="other-title">为你推荐</div>
    <div class="recommend-list">
        <div class="recommend-item" v-for="r in recommendList" @click="$router.push({name:'playDetail',params: {pid: r.performanceId}})">
            <img class="recommend-img" :src="r.posterUrl">
            <div class="recommend-con">
                <div class="recommend-label">
                    <a v-show="r.discountTag">有优惠</a>
                </div>
                <div class="recommend-name">【{{ r.cityName }}】{{ r.name }}</div>
                <div class="recommend-score">{{ r.score != "0.0" ?r.score:"暂无评分" }} </div>
                <div class="recommend-time">{{ r.showTimeRange }}</div>
                <div class="recommend-price">￥{{ r.priceRange.split("-")[0] }} <span>起</span> </div>
            </div>
        </div>
    </div>

    <div class="mb-20"></div>
</template>

<style lang="scss" scoped>
.play-top{
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2vw 4vw;
    box-sizing: border-box;

    .location-city{
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center;

        .location-img{
            width: 3.5vw;
            margin-right: 1.5vw;
        }
        .down-img{
            width: 3vw;
            margin: 0 2.5vw;
        }
    }
    .search-box{
        color: #999999;
        font-size: 14px;
        width: 68vw;
        height: 9vw;
        display: flex;
        align-items: center;
        padding: 0 3vw;
        box-sizing: border-box;
        background-color: #f5f5f5;
        border-radius: 2vw;
        
        img{
            width: 3.5vw;
            height: 3.5vw;
            margin-right: 2.5vw;
        }
        
        .search-txt{
            line-height: 3.6vw;
        }
    }
}

.nav-wrapper{
    width: 100vw;
    height: 24vw;
    overflow: hidden;

    .play-nav{
        width: 100vw;
        height: 26vw;
        overflow: auto;
        display: flex;

        .play-nav-item{
            min-width: 20vw;
            width: 20vw;
            color: #666666;
            font-size: 14px;
            text-align: center;
            line-height: 4vw;
            
            img{
                width: 16vw;
            }
        }
    }
}

.dot-wrapper{
    width: 8vw;
    height: 1.1vw;
    border-radius: 1vw;
    background-color: #eee;
    margin: 0 auto;
    position: relative;

    .dot{
        position: absolute;
        left: 0%;
        width: 3vw;
        height: 1.1vw;
        border-radius: 1vw;
        background-color: #f44;
    }
}

.title-list{
    color: #333333;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4vw;

    img{
        width: 24vw;
    }
    
    .title-nav{
        display: flex;
        align-items: center;
        font-size: 18px;

        div{
            color: #999999;
            padding: 0 2vw;
            border-right: #e6e6e6 2px solid;

            &.active{
                color: #333333;
                font-weight: bold;
            }

            &:last-of-type{
                border-right: none;
            }
        }
    }

    .more{
        width: 14vw;
        height: 6vw;
        line-height: 6vw;
        text-align: center;
        background-color: #f5f5f5;
        border-radius: 5vw;
    }
}

.today-hot-wrapper{
    width: 100vw;
    height: 44vw;
    overflow: hidden;

    .today-hot-list{
        width: 96vw;
        height: 50vw;
        display: flex;
        padding: 0 4vw;
        box-sizing: border-box;
        overflow-x: auto;

        .today-hot-item{
            width: 21.5vw;
            margin-right: 2vw;
            
            .item-img{
                width: 21.5vw;
                height: 28.5vw;
                border-radius: 2vw;
                overflow: hidden;
                position: relative;

                img{
                    width: 21.5vw;
                    height: 28.5vw;
                }
                .lable{
                    color: #fff;
                    font-size: 12px;
                    padding: 1vw 2vw;
                    position: absolute;
                    top: 0;
                    right: 0;
                    background-color: rgba(0,0,0,0.6);
                    border-radius: 4vw;
                }
                .score{
                    color: #faaf00;
                    font-size: 14px;
                    font-weight: bold;
                    width: 100%;
                    height: 7vw;
                    line-height: 7vw;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    padding-left: 2vw;
                    background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.8));
                    span{
                        font-size: 12px;
                    }
                }
            }

            .item-tag-have{
                display: inline-block;
                color: #fff;
                font-size: 12px;
                padding: 0.5vw 1vw;
                background: linear-gradient(270deg,#ffa30f,#ff7d3d);
                border-radius: 1vw;
                margin: 1vw 0;
            }
            
            .item-tag{
                display: inline-block;
                color: #fff;
                font-size: 12px;
                padding: 0.5vw 1vw;
                background: linear-gradient(135deg,#ff7142,#ff0b0b);
                border-radius: 1vw;
                margin: 1vw 0;
            }

            .item-con{
                color: #333333;
                width: 20vw;
                line-height: 4.5vw;
                font-weight: bold;
                font-size: 12px;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin: 0 auto;
            }

            .m-2{
                margin: 1vw 0;
            }

            .price{
                color: #f03d37;
                font-size: 14px;
                font-weight: bold;

                i{
                    font-size: 12px;
                    font-weight: normal;
                }
                span{
                    color: #999999;
                    font-size: 12px;
                    font-weight: normal;
                }
            }
        }
    }
}

.my-swipe {
    width: 92vw;
    height: 16vw;
    margin: 7vw auto;
    border-radius: 2vw;
    overflow: hidden;

    .van-swipe-item {
        height: 16vw;
        background-color: #39a9ed;

        img{
            width: 92vw;
            height: 16vw;
        }
    }
}

.play-rank{
    width: 100vw;
    // height: 30vw;
    background: #f8f8f8 url(../assets/imgs/play/bg.png) no-repeat;
    background-size: cover;
    margin-top: 4vw;
    padding-top: 3vw;
    
    .rank-title{
        color: #333333;
        font-size: 18px;
        height: 12vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 4vw;

        .big-title{
            font-weight: bold;
        }

        .more{
            font-size: 12px;
            width: 21vw;
            height: 6.5vw;
            line-height: 6.5vw;
            text-align: center;
            background-color: #ffffff;
            border-radius: 5vw;
        }
    }

    .rank-wrapper{
        width: 92vw;
        margin: 0 4vw;
        height: 90vw;
        overflow: hidden;

        .rank-list{
            width: 92vw;
            height: 100vw;
            display: flex;
            overflow-x: auto;
            
            .rank-item{
                min-width: 65vw;
                height: 85vw;
                background-color: #ffffff;
                border-radius: 2.5vw;
                margin-right: 3vw;
                box-shadow: 0 8px 20px -6px rgba(0,0,0,0.1);

                .rank-item-title{
                    color: #222222;
                    padding: 3vw 3vw 0 3vw;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .title{
                        font-weight: bold;
                    }
                    .more{
                        display: inline-block;
                        padding: 2vw;
                        font-size: 12px;
                    }
                }
                
                .con-item{
                    width: 100%;
                    padding: 0 3vw;
                    box-sizing: border-box;
                    margin-top: 1vw;
                    margin-bottom: 2vw;
                    
                    .rank-num{
                        color: #522727;
                        font-size: 13px;
                        font-weight: bolder;
                        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                        line-height: 4vw;
                        display: inline-block;
                        padding: 0 1vw;
                        border-radius: 1.5vw;
                        background-color: #ffece1;
                    }
                    .rank-con{
                        display: flex;
                        align-items: center;

                        img{
                            width: 12vw;
                            height: 16vw;
                            border-radius: 2vw;
                            margin-right: 2vw;

                            &.active{
                                width: 15vw;
                                height: 19vw;
                            }
                        }
                        .play-details{
                            color: #a39081;
                            font-size: 12px;
                            width: 40vw;

                            .play-name{
                                color: #333333;
                                font-weight: bold;
                                font-size: 15px;
                                width: 40vw;
                                line-height: 7vw;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                            .play-desc{
                                width: 40vw;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                            .play-price{
                                font-size: 13px;
                                color: #f03d37;
                                font-weight: bold;
                                margin-top: 2.5vw;

                                span{
                                    color: #a39081;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}

.other-title{
    color: #222222;
    font-size: 18px;
    font-weight: bold;
    padding: 3vw 4vw;
    background-color: #f8f8f8;
}

.artists-wrapper{
    width: 100vw;
    height: 32vw;
    background-color: #f8f8f8;
    overflow: hidden;
    
    .artists-list{
        width: 100vw;
        height: 34vw;
        display: flex;
        overflow: auto;
        padding-left: 4vw;
        box-sizing: border-box;

        .artists-item{
            min-width: 22vw;
            height: 26vw;
            text-align: center;
            background-color: #ffffff;
            margin-right: 2vw;
            padding-top: 1.5vw;
            border-radius: 2vw;
            box-shadow: 0 4px 15px -5px rgba(0,0,0,0.15);

            .artists-img{
                width: 11vw;
                height: 11vw;
                border-radius: 50%;
                margin: 1.5vw auto;
                overflow: hidden;

                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .artists-name{
                width: 18vw;
                color: #222222;
                font-weight: bold;
                line-height: 5vw;
                font-size: 13px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                margin: 0 auto;
            }
            .artists-span{
                display: inline-block;
                color: #999999;
                font-weight: normal;
                line-height: 5vw;
                font-size: 12px;
                position: relative;

                .red-tip{
                    position: absolute;
                    top: 0;
                    right: -1vw;
                    display: block;
                    width: 1vw;
                    height: 1vw;
                    background: linear-gradient(140deg,#ff7979,#f04444);
                    border-radius: 50%;
                }
            }
        }
    }
}

.recommend-list{
    width: 100vw;
    column-count: 2;
    background-color: #f8f8f8;
    padding: 0 4vw;
    box-sizing: border-box;

    .recommend-item{
        font-size: 14px;
        width: 45vw;
        background-color: #ffffff;
        box-shadow: 0 10px 20px -2px rgba(0,0,0,0.1);
        border-radius: 3vw;
        overflow: hidden;
        margin-bottom: 3vw;

        .recommend-img{
            width: 100%;
            height: auto;
        }

        .recommend-con{
            width: 100%;
            padding: 2vw 3vw;
            box-sizing: border-box;

            .recommend-label{
                margin-bottom: 2vw;
                
                a{
                    color: #f03d37;
                    font-size: 13px;
                    padding: 1px 3px;
                    border-radius: 1vw;
                    background: #fef0ef;
                }
            }
            .recommend-name{
                color: #333333;
                font-weight: bold;
                line-height: 5vw;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }
            .recommend-score{
                color: #ff913d;
                font-size: 13px;
                font-weight: bold;
                font-family: MaoYanHeiTi-H;
                margin: 1.2vw 0;
            }
            .recommend-time{
                font-size: 12px;
                color: #999999;
            }
            .recommend-price{
                color: #f03d37;
                margin-top: 3vw;

                span{
                    font-size: 12px;
                }
            }
        }
    }
}

.mb-20{
    width: 100vw;
    height: 20vw;
}
</style>